<template>
  <!-- 右边题目答案清单 -->
  <div>
    <div style="margin: 20px;">
      <span id="ni">|</span>
      <span>题目/答案清单</span>
      <p class="hao">以下是该章节下所有题目的和答案的清单，请审阅：</p>
      <a-table :columns="columns" :data-source="data" :pagination="false">
      </a-table>
    </div>
    <!-- 右2 -->
    <div style="margin: 20px;">
      <div style="display: flex;">
        <div>
          <span id="ni">|</span>
          <span>安全合规要求、计划和执行</span>
        </div>
        <!-- 新增按钮 -->
        <naction style="margin-left: 10px;"/>
      </div>

      <a-table :columns="columns1" :data-source="data1" :pagination="false" style="margin-top: 10px;">
        <span slot="action" slot-scope="record">
          <!-- 修改按钮 -->
          <a-button type="link" @click="edit(record.Id)">编辑</a-button>
          <!-- 删除按钮 -->
          <a-popconfirm title="此操作不可逆，是否确认删除?" @confirm="() => del(record.Id)">
            <a-button type="link" size="small">删除</a-button>
          </a-popconfirm>
        </span>
      </a-table>
    </div>
    <div style="margin: 20px;">
      <span id="ni">|</span>
      <span>DCO评估</span>
      <div style="display: flex; margin: 10px 10px 60px 10px">
        <span style="width: 110px;">
          DCO评估意见
        </span>
        <a-textarea placeholder="请输入评估意见" :auto-size="{ minRows: 2, maxRows: 6 }"/>
      </div>
    </div>
  </div>
</template>
<script>
import {Editor} from '@/components'
import Naction from '../therequestion/naction.vue'

const columns = [
  {
    title: '序号',
    dataIndex: 'key',
    align: 'center',
    width: '60px'

  },
  {
    title: '题目',
    dataIndex: 'dataKey',
    // align: 'center'
  },
  {
    title: '答案',
    dataIndex: 'purAndNece',
    scopedSlots: {customRender: 'purAndNece'},
    align: 'center'
  },
  {
    title: '备注',
    dataIndex: 'notes',
    scopedSlots: {customRender: 'notes'},
    align: 'center'
  },
]

const data = [
  {
    key: 1,
    dataKey: '从RPA读取及三小块啊是科技创新那可就',
    purAndNece: '从RPA读取从RPA读取及三小块啊是科技创新那可',
    notes: '从RPA读取及三小块啊是科技创新那',
  },
  {
    key: 2,
    dataKey: '从RPA读取从RPA读取及三小块啊是科技创新那可就',
    purAndNece: '从RPA读取从RPA读取及三小块啊是科技创新那可就是',
    notes: '从RPA读取及三小块啊是科技创新那可就是那',
  },
  {
    key: 3,
    dataKey: '从RPA读取从RPA读取及三小块啊是科技创新那可就是那',
    purAndNece: '从RPA读取从RPA读取及三小块啊是科技创新那可就',
    notes: '从RPA读取及三小块啊是科技创新那可',
  },

]
const columns1 = [
  {
    title: '合规要求编号',
    dataIndex: 'key',
    align: 'center',
  },
  {
    title: '合规要求名称',
    dataIndex: 'dataKey',
    align: 'center'
  },
  {
    title: 'Action来源',
    dataIndex: 'purAndNece',
    scopedSlots: {customRender: 'purAndNece'},
    align: 'center'
  },
  {
    title: 'Action责任人',
    dataIndex: 'notes',
    scopedSlots: {customRender: 'notes'},
    align: 'center'
  },
  {
    title: '发起时间',
    dataIndex: 'actime',
    scopedSlots: {customRender: 'actime'},
    align: 'center'
  },
  {
    title: '目标完成时间',
    dataIndex: 'sutime',
    scopedSlots: {customRender: 'sutime'},
    align: 'center'
  },
  {
    title: '状态',
    dataIndex: 'state',
    scopedSlots: {customRender: 'state'},
    align: 'center'
  },
  {
    title: '最后更新时间',
    dataIndex: 'lstime',
    scopedSlots: {customRender: 'lstime'},
    align: 'center'
  },
  {
    title: '操作',
    dataIndex: 'action',
    scopedSlots: {customRender: 'action'},
    align: 'center'
  },
]

const data1 = [
  {
    key: 1,
    dataKey: '从RPA读',
    purAndNece: '从RPA读取',
    notes: '从RPA读',
    actime: '20128',
    sutime: '3298',
    state: 'not started',
    lstime: '39277',
  },
  {
    key: 2,
    dataKey: '从RPA读取',
    purAndNece: '从RPA读',
    notes: '从RPA读',
    actime: '20128',
    sutime: '3298',
    state: 'not started',
    lstime: '39277',
  },
  {
    key: 3,
    dataKey: '从RPA读取从R',
    purAndNece: '从RPA读',
    notes: '从RPA读取可',
    actime: '20128',
    sutime: '3298',
    state: 'not started',
    lstime: '39277',
  },

]
export default {
  components: {
    Editor,
    Naction
  },
  data() {
    return {
      current: '',
      columns,
      data,
      columns1,
      data1,
      value: '',

    }
  },
  methods: {}
}

</script>
<style lang="less" scoped>
.hao {
  margin: 10px 10px 10px 5px;
}

#ni {
  /*矩形备份*/
  margin-right: 5px;
  left: 838px;
  top: 287px;
  width: 6px;
  height: 12px;
  opacity: 1;
  border-radius: 2px;
  background: rgba(0, 80, 247, 1);
}
</style>
